import './style.scss'
import { useAppDispatch, useAppSelector } from '@/store';
import {
  CaretDownOutlined,
} from '@ant-design/icons';
import { useState } from 'react'

export default () => {
  const dispatch = useAppDispatch();
  const [expand, setExpand] = useState(true);
  const actionState = useAppSelector(state => state.actions)

  return <>
    <div className={`instrument-module ${expand ? 'expand' : ''}`}>
      <div className="instrument-module-header" onClick={() => setExpand(!expand)}>
        <div className="instrument-module-header__name">操作记录</div>
        <div className='instrument-module-header__control'>
          <CaretDownOutlined rotate={expand ? 180 : 0} />
        </div>
      </div>
      <div className="instrument-module-content">
        <div className="layer-list">
          {
            actionState.list.map(item => {
              return <div key={item.id}>test</div>
            })
          }
        </div>
      </div>
    </div>
  </>
}